<template>
  <div class="mode_paln_list">
    <e-cellbox middle class="selected-plan">
      <e-cell-item :class="{'plan-style': handleEd == 0}">
        <span class="type-display">{{$t(revereSportType(singleItem.sportType))}}</span>
        <e-avatar class="avatar" :src="singleItem.headUrl" />
        <div class="note">
          <p class="note-name" :title="singleItem.createName ? singleItem.createName : singleItem.userName">{{singleItem.createName ? singleItem.createName : singleItem.userName}}</p>
          <p class="small">{{$t(`train['发布时间']`)+$t('：')}}{{new Date(singleItem.createTime).format('yyyy-MM-dd hh:mm')}}</p>
        </div>
      </e-cell-item>
      <e-cell-item class="tr weak">
        <el-button type="link" @click="handleDetail">{{$t('详情')}}</el-button>
        <el-button type="link" @click="handleSetYes" v-if="activeName == 0 && roleType != 99">{{$t('通过')}}</el-button>
        <el-button type="link" @click="handleSetNo" v-if="activeName == 0 && roleType != 99">{{$t('拒绝')}}</el-button>
        <el-button type="link" @click="handleEdit" v-if="(activeName == 1 || (activeName == 2 && roleType != 99)) && handleEd != 0">{{$t('编辑')}}</el-button>
        <el-button type="link" @click="handleDeLete" v-if="(activeName == 1 || (activeName == 2 && roleType != 99)) && handleEd != 0">{{$t('删除')}}</el-button>
        <el-button type="link" @click="handleExport" v-if="activeName == 2">{{$t('导出')}}</el-button>
        <el-button type="link" @click="handleResubmit" v-if="activeName == 1">{{$t(`train['再次提交']`)}}</el-button>
      </e-cell-item>
    </e-cellbox>
    <div class="table-list">
      <el-table
        :data="[singleItem]" 
        border
        tooltip-effect="dark" 
        :empty-text="$t(`train['暂无训练方式']`)">
        <el-table-column 
          prop="trainingDuration"
          :label="$t(`train['训练时长']`)" 
          width="80"
          align="center">
          <template slot-scope="scope">
            {{scope.row.trainingDuration}}{{$t(`train['分钟']`)}}
          </template>
        </el-table-column>
        <el-table-column 
          prop="trainingName"
          :label="$t(`train['训练方式名称']`)" 
          width="250"
          :show-overflow-tooltip="true"
          align="center">
          <template slot-scope="scope">
            {{scope.row.trainingName}}
          </template>
        </el-table-column>
        <el-table-column 
          prop="trainingAim"
          :label="$t(`train['训练目标']`)" 
          width="382">
          <template slot-scope="scope">
            {{scope.row.trainingAim ? scope.row.trainingAim : '-'}}
          </template>
        </el-table-column>
        <el-table-column 
          prop="imageUrls"
          :label="$t(`train['训练图示']`)" 
          width="120" 
          align="center">
          <template slot-scope="scope">
            <e-preview-box v-if="scope.row.imageUrls && scope.row.imageUrls.length > 0">
              <e-swiper
                height="120px"
                :slides="1">
                <e-swiper-item v-for="(item, index) in scope.row.imageUrls" :key="index">
                    <img class="carousel-img" v-bind:src="item">
                </e-swiper-item>
              </e-swiper>
            </e-preview-box>
            <div v-else style="height:120px;line-height:120px;">{{$t(`train['暂无图示']`)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {ESwiper, ESwiperItem} from '@e-ui/swiper'

export default {
  components: {
    ESwiper,
    ESwiperItem
  },
  data () {
    return {
      roleType: ''
    }
  },
  created () {
    this.roleType = localStorage.getItem('role_type')
  },
  props: {
    singleItem: Object,
    isHandel: String,
    activeName: String,
    modeSportList: Array,
    handleEd: [String, Number]
  },
  methods: {
    handleSetYes () {
      this.$emit('pass', this.singleItem)
    },
    handleSetNo () {
      this.$emit('deny', this.singleItem)
    },
    handleEdit () {
      this.$emit('edit', {data: this.singleItem, type: 'edit'})
    },
    handleDetail () {
      this.$emit('detail', {data: this.singleItem, type: 'show'})
    },
    handleDeLete () {
      this.$emit('delete', this.singleItem)
    },
    handleExport () {
      this.$emit('export', this.singleItem)
    },
    handleResubmit () {
      this.$emit('resubmit', this.singleItem)
    },
    revereSportType: function (val) { // 获取运动类型
      let typeText = Number(val)
      if (this.modeSportList && this.modeSportList.length > 0) {
        this.modeSportList.forEach((item) => {
          if (item.fieldValue === Number(val)) {
            typeText = item.fieldName
          }
        })
      }
      return typeText
    }
  }
}
</script>

<style lang="scss">
  .mode_paln_list {
    display: inline;
    .selected-plan {
      margin-top: -33px;
      .type-display {
        border: 1px solid #f7ba60;
        border-radius: 2px;
        background-color: #fff8ea;
        min-width: 55px;
        padding: 0 5px;
        height: 25px;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        line-height: 22px;
        color: #f7ba60;
        margin: 0 5px;
      }
      .note {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
        .note-name {
          font-weight: 700;
          width: 170px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis
        }
      }
      .plan-style {
        padding-left: 20px !important;
      }
      .el-button--link{
        vertical-align: middle;
        font-size: 12px;
      }
      .avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .table-list {
      margin-top: 15px;
      width:100%;
      border-left:1px solid #f2f2f2;
      .swiper-nav {
        display: none;
      }
    }
  }
</style>
